<template>
  <div class="drawer-workspace">
    <drawer-item
      :selected="selected"
      :icon="icon"
      :text="title"
      @click.native="onClick"
      class="head"
    >
      <t-icon
        name="next"
        size="14px"
        @click.native="open = !open"
        :style="iconStyle"
      ></t-icon
    ></drawer-item>
    <t-slide-transition>
      <div v-show="open">
        <drawer-project
          v-for="project in projects"
          :key="project.id"
          :id="project.id"
          :title="project.title"
        />
      </div>
    </t-slide-transition>
  </div>
</template>
<script>
import TIcon from "@/components/ui/TIcon";
import TSlideTransition from "@/components/ui/TSlideTransition";
import DrawerItem from "@/components/DrawerItem";
import DrawerProject from "@/components/DrawerProject";
export default {
  name: "DrawerWorkspace",
  components: {
    TIcon,
    TSlideTransition,
    DrawerItem,
    DrawerProject
  },
  props: {
    id: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      default: "self_service_kiosk"
    },
    title: {
      type: String,
      required: true
    },
    projects: {
      type: Array,
      default: () => [],
      validator: arr => {
        if (!Array.isArray(arr)) return false;
        arr.forEach(v => {
          if (!v.id) return false;
          if (!v.title) return false;
        });
        return true;
      }
    }
  },
  data() {
    return {
      open: true
    };
  },
  computed: {
    selected() {
      return (
        this.$route.name === "workspace" && this.$route.params.id === this.id
      );
    },
    iconStyle() {
      const styles = {};
      styles.transition = "all ease-in-out .2s";
      if (this.open) styles.transform = "rotate(90deg)";
      return styles;
    }
  },
  methods: {
    onClick() {
      if (this.selected) return;
      this.$router.push({
        name: "workspace",
        params: { id: this.id }
      });
    }
  }
};
</script>
<style lang="less">
.drawer-workspace {
  margin-bottom: 16px;
  .head {
    font-weight: bold;
  }
  .head .btns {
    opacity: 0;
  }
  .head:hover .btns {
    opacity: 1;
  }
}
</style>
